<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 m-import">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">导入记录</div>
        </div>
        <div class="widget-body  am-fr">
          <customer-toolbar ref="toolbar"  class="toolbar" @search="handleFind"
                            areaTeam createTime importOperatorName
          ></customer-toolbar>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-fr am-text-right">
            <button
              v-if="hasPermission('download')"
              @click="handleDownLoad"
              type="button"
              class="btn-search am-btn am-btn-default am-btn-success"
            >
              下载模板
            </button>
            <button type="button" class="btn-search am-btn am-btn-default am-btn-success"
                    v-if="hasPermission('import')" @click="prepareUpload">
              <span class="am-icon-cloud-upload"></span>&nbsp;批量导入
            </button>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%">
              <el-table-column
                prop="periodName"
                min-width="160"
                label="导入内容">
                <template scope="scope">
                  <div>本次导入{{scope.row.importAmount}}条资源，成功{{scope.row.acceptAmount}}条，失败{{scope.row.rejectAmount}}条</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="importOperatorName"
                min-width="160"
                label="导入人">
              </el-table-column>
              <el-table-column
                prop="jobNature"
                min-width="160"
                label="导入时间">
                <template scope="scope">
                  <div>{{scope.row.createTime | formatTime}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="jobNature"
                min-width="160"
                label="操作">
                <template scope="scope">
                  <el-button size="small" @click="handleDetail(scope.row.marketImportId)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <import-detail ref="importDetail"></import-detail>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination v-bind:total="total" v-bind:pageNo="pageNo" v-bind:pageSize="pageSize"
                        @paging="loadTableData"/>
          </div>
        </div>
        <window class="import-win" ref="win" :title="title">
          <el-select size="small" class="am-u-sm-12 am-form-group"
                     v-model="areaTeamId" placeholder="请选择区域" @change="findDepartmentList">
            <el-option
              v-for="item in areaTeams"
              :key="item.areaTeamId"
              :label="item.name"
              :value="item.areaTeamId">
            </el-option>
          </el-select>
          <div v-if="type === 'upload'">
            <!-- <el-select size="small" class="am-u-sm-12 am-form-group"
              v-model="departmentId" placeholder="请选择部门">
              <el-option
                v-for="item in DepartmentList"
                :key="item.departmentId"
                :label="item.departmentName"
                :value="item.departmentId">
              </el-option>
            </el-select> -->
            <input
              class="am-u-sm-12 am-form-group"
              id="uploadFile"
              :disabled="!areaTeamId"
              type="file"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
              <el-button @click = "uploadExcel" type = "success">确认</el-button>
          </div>
          <div v-if="type === 'downLoad'" class="am-text-center am-form-group">
            <el-button @click="handleConfirm" type="success">确认</el-button>
          </div>
        </window>
      </div>
    </div>

  </div>
</template>
<script>
  import io from '../../lib/io'
  import CustomerToolbar from './CustomerToolbar.vue'
  import Pagination from '../base/Pagination.vue'
  import ImportDetail from './ImportDetail.vue'
  import moment from 'moment'

  export default{
    data:function(){
      return {
        areaTeamId: '',
        title: '',
        type: '',
        total: 0,
        pageSize: 10,
        pageNo: 1,
        tableData: [],
        DepartmentList:[],
        departmentId:'',
      }
    },
    components: {
      CustomerToolbar, Pagination, ImportDetail
    },
    watch: {

    },
    computed: {
      areaTeams: function () {
        return this.$root.config.areaTeams || []
      },
    },
    mounted :function(){
      $(window).smoothScroll()
    },
    beforeDestroy () {
      this.$refs.win.$el.innerHTML = ''
    },
    methods:{
      handleDetail (marketImportId) {
        io.post(io.importDetail, {marketImportId: marketImportId}, (ret) => {
          if (ret.success) {
            this.$refs.importDetail.tableData = ret.data
            this.$refs.importDetail.show()
          } else {
            this.$alert(ret.desc)
          }
        })
      },
      handleConfirm () {
        if (!this.areaTeamId) {
          this.$alert('请选择区域！')
          return
        }
        io.downloadFile(io.downloadImportTemplate, {areaTeamId: this.areaTeamId})
        this.$refs.win.close()
      },
      handleDownLoad() {
        this.$refs.win.show()
        this.areaTeamId = this.$refs.toolbar.query.areaTeamId
        this.title = '下载模板'
        this.type = 'downLoad'
      },
      prepareUpload:function(){
        this.$refs.win.show()
        this.areaTeamId = this.$refs.toolbar.query.areaTeamId
        this.title = '导入'
        this.type = 'upload'
        this.findDepartmentList()
      },
      uploadExcel:function() {
        // if(!this.departmentId){
        //   this.$alert('请选择部门')
        //   return false
        // }
        let formData = new FormData();
        formData.append("file",document.getElementById('uploadFile').files[0]);
        this.$showLoading()
        let params = '?accessToken=' + io.getHeaders().accessToken + '&areaTeamId=' + this.areaTeamId
        io.postFile(io.importCustomerResource + params, formData, (ret) => {
          $('#uploadFile').val(null)
          this.$hiddenLoading()
          if (ret.ok && ret.data.success){
            this.loadTableData()
            this.$refs.win.close()
            this.$alert('导入成功');
          } else {
            this.$alert(ret.data.desc || "上传失败");
          }
        })
      },
      handleFind(data) {
        this.formData = this.formatData(data)
        this.loadTableData(1)
      },
      loadTableData: function (pageNo) {
        this.pageNo = pageNo || this.pageNo || 1
        this.$showLoading()
        io.post(io.importRecord, Object.assign({}, this.formData, {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        }), (ret) => {
          this.$hiddenLoading()
          if (ret.success) {
            this.tableData = ret.data.list
            this.total = ret.data.total
          } else {
            this.$alert(ret.desc)
          }
        })
      },
       findDepartmentList(){
        let param = {
          areaTeamId:this.areaTeamId
        }
        io.post(io.findDepartmentList,param,(data)=>{
          if(data.success){
            this.DepartmentList = data.data
          }else{
            this.$alert(ret.desc)
          }
        })
      },
      formatData(data) {
        return {
          areaTeamId: data.areaTeamId,
          importOperatorName: data.importOperatorName,
          startDate: data.createTime[0] ? moment(data.createTime[0]).format('YYYY-MM-DD') : '',
          endDate: data.createTime[1] ? moment(data.createTime[1]).format('YYYY-MM-DD') : '',
        }
      }
    }
  }
</script>
<style lang="less">
  .import-win {
    .am-modal-hd {
      margin-bottom: 20px;
    }
  }
</style>
